<template>
  <div>
    <div class="u-title">粉丝({{ content.length }})</div>
    <ul class="follows-box">
      <li class="follows-item" v-for="item in content" :key="item.userId">
        <img :src="item.avatarUrl" class="avatarUrl" alt="" />
        <div class="follows-item-content">
          <p class="item-nickname">{{ item.nickname }}</p>
          <ul class="follows-item-num-box">
            <li>
              动态
              <router-link
                :to="{ name: 'dynamic', query: { id: item.userId } }"
                >{{ item.eventCount }}</router-link
              >
            </li>
            <li>
              关注
              <router-link
                :to="{ name: 'Follows', query: { id: item.userId } }"
                >{{ item.follows }}</router-link
              >
            </li>
            <li>
              粉丝
              <router-link :to="{ name: 'Fans', query: { id: item.userId } }">{{
                item.followeds
              }}</router-link>
            </li>
          </ul>
          <p class="txtHide">{{ item.signature }}</p>
        </div>
        <div>
          <Button>关注</Button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getFolloweds } from "@/api";
import Button from "@/components/Button";
export default {
  data() {
    return {
      limit: 30,
      content: [],
    };
  },
  created() {
    this.getData();
  },
  components: {
    Button,
  },
  methods: {
    getData() {
      getFolloweds({ uid: this.$route.query.id, limit: this.limit }).then(
        (res) => {
          this.content = res.followeds;
        }
      );
    },
  },
  beforeRouteUpdate(to, from, next) {
    next();
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.follows-box {
  border-left: 1px solid #d5d5d5;
  display: flex;
  flex-wrap: wrap;
  .follows-item {
    width: 50%;
    display: flex;
    box-sizing: border-box;
    padding: 20px;
    border-bottom: 1px solid #d5d5d5;
    border-right: 1px solid #d5d5d5;
    .avatarUrl {
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }
    .follows-item-content {
      flex: 1;
      overflow: hidden;
      .item-nickname {
        color: #0c73c2;
      }
      .follows-item-num-box {
        display: flex;
        li {
          margin-top: 6px;
          margin-right: 10px;
          a {
            color: #0c73c2;
          }
        }
      }
    }
    .followType {
      margin-top: 5px;
      text-align: center;
      color: #999;
    }
  }
}
</style>